﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <title>支付宝支付</title>
    <!-- 引入 WeUI -->
    <link rel="stylesheet" href="//res.wx.qq.com/open/libs/weui/1.1.2/weui.min.css" />
    <link rel="stylesheet" type="text/css" href="css/css.css">
</head>
<body>

<div id="app" class="container" style="padding: 0px;">
    <div class="wamtop" v-if="iswx" v-on:click="back">
        <div class="topleft goback">
            <img src="img/5.jpg" />
        </div>
        <div class="topcententxt title">
            确认支付
        </div>
    </div>
    <div class="weui-form-preview">
        <div class="weui-form-preview__hd">
            <div class="weui-form-preview__item">
                <label class="weui-form-preview__label">付款金额</label>
                <em class="weui-form-preview__value">¥{{order.total_price}}</em>
            </div>
        </div>
        <div class="weui-form-preview__bd">
            <div class="weui-form-preview__item">
                <label class="weui-form-preview__label">描述</label>
                <span class="weui-form-preview__value">微街秀充值</span>
            </div>
        </div>
        <div class="weui-form-preview__bd">
            <div class="weui-form-preview__item">
                <label class="weui-form-preview__label">支付状态</label>
                <span class="weui-form-preview__value">{{order.state==1?'已支付':'待支付'}}</span>
            </div>
        </div>
        <div class="weui-form-preview__ft">
            <a class="weui-btn weui-form-preview__btn weui-form-preview__btn_primary" v-on:click="submit" v-if="!iswx" style="background-color: #F37B0B; color: white;" href="javascript:">立即支付</a>
            <a class="weui-btn weui-form-preview__btn weui-form-preview__btn_primary" v-if="iswx" href="javascript:">请点击右上角在浏览器中打开</a>
        </div>
    </div>
</div>

<script src="//cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<script src="js/querystring.js" type="text/javascript"></script>
<!--<script src="//cdn.bootcss.com/vue/2.3.3/vue.js"></script>-->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="//cdn.bootcss.com/vue-resource/1.3.1/vue-resource.min.js"></script>
<script>
    var orderid = '';
    var query = querystring.parse();
    if (query && query.orderid) {
        orderid = query.orderid;
    } else {
        alert("服务器参数错误!");
    }
    var app = new Vue({
        el: '#app',
        data: {
            order: {},
            iswx: true
        },
        created: function() {
            this.fetchData();
            this.isWeiXin();
        },
        methods: {
            fetchData: function() {
                this.$http.get('ajax/fc_order.ashx?getorder&orderid=' + orderid, { emulateJSON: true })
                    .then(function(res) {
                            if (res.bodyText) {
                                var result = JSON.parse(res.bodyText);
                                this.order = result.item;
                            }
                        },
                        function(err) {
                            console.log(err);
                        });
            },
            isWeiXin: function() {
                var ua = window.navigator.userAgent.toLowerCase();
                if (ua.match(/MicroMessenger/i) == 'micromessenger') {
                    this.iswx = true;
                } else {
                    this.iswx = false;
                }
            },
            submit: function() {
                if (this.order.state === 1) {
                    alert('该订单已经支付！');
                } else {
                    window.location.href = 'ali/Index.aspx?orderno=' + orderid;
                }

            },
            back:function(){
                window.location.href = 'makead_1.html';
            }
        }
    })
</script>
</body>
</html>
